<template>
  <!-- 申请 -->
  <div class="MoreDiary">
    <div class="side_1"></div>
    <span class="add_1">更多日志</span>
    <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
    <div class="search-box">
      <hy-search
        class="hy_search"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :col="6"
        @search="search(1)"
      ></hy-search>
    </div>
    <div class="body">

      <!--<table class="table" style="border: 1px solid #eee;overflow:auto;margin: 0 auto; width:90%;">
        <tr v-for="item in tableData" :key="item.year">
          <td style="width:5%;border-bottom: 1px solid #eee;border-right: 1px solid #eee;">{{ item.year }}年</td>
          <td style="width:95%;">
        <tr v-for="ite in item.quarteList" :key="ite.quarte">
          <td style="width:5%;border-bottom: 1px solid #eee;border-right: 1px solid #eee;">{{ ite.quarte }}季度</td>
          <td style="width:95%;">
        <tr v-for="it in ite.monthList" :key="it.month">
          <td style="border-bottom: 1px solid #eee;width:50%;border-right: 1px solid #eee;">{{ it.main }}</td>
          <td style="width:50%;">
        <tr style="border-bottom: 1px solid #eee;" v-for="i in it.weekList" :key="i.week">{{ i.main }}</tr>
        </td>
        </tr>
        </td>
        </tr>
        </td>
        </tr>
      </table>-->
      <!--<el-table class="table" style="border: 1px solid #eee;overflow:auto;margin: 0 auto; width:90%;"
                align="center"
                :data="tableData"
                border
                :span-method="arraySpanMethod"
      >
        <el-table-column prop="y" label="年" width="200" align="center"></el-table-column>
        <el-table-column prop="q" label="季度" width="200" align="center"></el-table-column>
        <el-table-column prop="m" label="月" width="200" align="center"></el-table-column>
        <el-table-column prop="w" label="周" width="200" align="center"></el-table-column>
        <el-table-column prop="main" label="计划" align="center"></el-table-column>
      </el-table>-->
      <el-table
        class="table"
        style="border: 1px solid #eee;overflow:auto;margin: 0 auto; width:90%;"
        :data="tableData"
        :span-method="objectSpanMethod"
        border
      >
        <el-table-column label="年" prop="y" align="center" width="200"></el-table-column>
        <el-table-column label="季度" prop="q" align="center" width="200"></el-table-column>
        <el-table-column label="月" prop="m" align="center" width="200"></el-table-column>
        <el-table-column label="月计划" prop="m_main" align="center" width="200"></el-table-column>
        <el-table-column label="周" prop="w" align="center" width="200"></el-table-column>
        <el-table-column label="周计划" prop="w_main" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  computed: {},
  data() {
    return {
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入成品名称",
          prop: "customProductName"
        },

        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      tableData: [],
    };
  },
  mounted() {
    this.getData(0);
  },
  created() {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column['property'] + '-span'
      if(row[span]){
        return row[span]
      }
    },
    mergeTableRow(data, merge) {
      if (!merge || merge.length === 0) {
        return data
      }
      merge.forEach((m) => {
        const mList = {}
        data = data.map((v, index) => {
          const rowVal = v[m]
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            mList[rowVal]['num']++
            mList[rowVal]['newIndex']++
            data[mList[rowVal]['index']][m + '-span'].rowspan++
            v[m + '-span'] = {
              rowspan: 0,
              colspan: 0
            }
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
            v[m + '-span'] = {
              rowspan: 1,
              colspan: 1
            }
          }
          return v
        })
      })
      return data
    },
    getData() {
      let start = "";
      let end = "";
      if (this.searcher.issuanceDate != null && this.searcher.issuanceDate != "") {
        start = this.searcher.issuanceDate[0];
        end = this.searcher.issuanceDate[1];
      }
      let obj = {
        key: this.searcher.customProductName ? this.searcher.customProductName : "",
        start: start,
        end: end,
        creater: this.creater
      };
      var objs = JSON.stringify(obj);
      let the = {index: 8, jsondata: objs}
      console.log(objs);
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
        const list = eval('(' + data.d + ')');
        list.forEach(q => {
          console.log(q, "q");
          q.quarteList.forEach(y => {
            console.log(y, "y")
            y.monthList.forEach(m => {
              console.log(m, "m")
              m.weekList.forEach(w => {
                console.log(w, "w")
                const week_info = {
                  y: "",
                  q: "",
                  m: "",
                  m_main: "",
                  w: "",
                  w_main: ""
                };
                //年
                week_info.y = q.year == undefined ? "--" : q.year;
                //季度
                week_info.q = y.quarte == undefined ? "--" : y.quarte;
                //月份
                week_info.m = m.month == undefined ? "--" : m.month;
                //月工作计划
                week_info.m_main = m.main == undefined ? "--" : m.main;
                //周
                week_info.w = w.week == undefined ? "--" : w.week;
                //周计划
                week_info.w_main = w.main == undefined ? "--" : w.main;
                this.tableData.push(week_info)
              })
            })
          });

        })
        this.tableData = this.mergeTableRow(this.tableData, ['y', 'q','m','w'])

        /*this.tableData = list;
        console.log(this.tableData)
        for (var i = 0; i < this.tableData.length; i++) {
          console.log(this.tableData[i].quarteList);
        }*/
      });
      /*this.rowspan(this.testArr1, this.testPosition1, "y");
      this.rowspan(this.testArr2, this.testPosition2, "q");*/
      /*this.rowspan(this.testArr3, this.testPosition3, "m");
      this.rowspan(this.testArr4, this.testPosition4, "w");*/
    },
    Fh() {
      window.history.go(-1);
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

table,
table tr th,
table tr td {
  font-size: 14px;
  text-align: center;

}

.side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  margin-left: 10px;
  margin-top: 30px;
}

.add_1 {
  margin-left: 20px;
  margin-top: -20px;
  float: left;
  font-size: 18px;
  font-weight: 400;
}

.btn_fanhui {
  margin-top: -20px;
  margin-right: 20px;
  float: right;
}

.search-box {
  border: 1px solid $white;
  width: 98%;
  height: 60px;
  background-color: $white;
  margin-left: 15px;
  margin-top: 40px;
}

.hy_search {
  margin-top: 10px;
  margin-left: 10px;
}

.body {
  width: 98%;
  height: 650px;
  background-color: $white;
  margin-left: 10px;
  margin-top: 20px;
  padding: 20px 0;
  // border: 1px solid rgba(228, 228, 228, 1);
  overflow: auto;

}

.el-table {
  font-size: 14px;
  color: #323232;
}
</style>
